<!doctype html>
<html>
  <head>
    <title>JsonDiffPatch</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <link
      rel="stylesheet"
      href="./build/demo.css"
      type="text/css"
      media="screen"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.min.css"
      type="text/css"
      media="screen"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/codemirror.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/3.21.0/mode/javascript/javascript.min.js"
    ></script>
  </head>

  <body>
    <a href="https://github.com/benjamine/jsondiffpatch" class="github-corner"
      ><svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style="
          fill: #151513;
          color: #fff;
          position: absolute;
          top: 0;
          border: 0;
          right: 0;
        "
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px"
          class="octo-arm"
        ></path>
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          class="octo-body"
        ></path></svg></a
    ><style>
      .github-corner:hover .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
      }
      @keyframes octocat-wave {
        0%,
        100% {
          transform: rotate(0);
        }
        20%,
        60% {
          transform: rotate(-25deg);
        }
        40%,
        80% {
          transform: rotate(10deg);
        }
      }
      @media (max-width: 500px) {
        .github-corner:hover .octo-arm {
          animation: none;
        }
        .github-corner .octo-arm {
          animation: octocat-wave 560ms ease-in-out;
        }
      }
    </style>
    <header>
      <h1>
        Js<span class="jsondiffpatch-textdiff-deleted"><span>on</span></span
        ><span class="jsondiffpatch-textdiff-added"><span>Diff</span></span
        >Patch
      </h1>
      <span id="description"></span>
      <a id="external-link" style="display: none">source</a>
    </header>
    <div class="buttons">
      <div>
        <input id="swap" type="button" value="Swap" />
        <input id="clear" type="button" value="Clear" />
        <select id="examples">
          <option value="" disabled selected>examples</option>
          <option value="default">default</option>
          <option value="text">text</option>
          <option value="moving">moving around</option>
          <option value="gist">from a gist</option>
          <option value="query">query params</option>
          <option value="urls">raw urls</option>
        </select>
      </div>
    </div>
    <div class="json-input">
      <div id="json-panel-left">
        <label for="json-input-left">
          <h2>JSON Left</h2>
        </label>
        <button class="prettyfy" type="button" title="Pretty print">{ }</button>
        <textarea id="json-input-left">
        loading...
      </textarea
        >
        <span class="error-message"></span>
      </div>
      <div id="json-panel-right">
        <label for="json-input-right">
          <h2>JSON Right</h2>
        </label>
        <button class="prettyfy" type="button" title="Pretty print">{ }</button>
        <textarea id="json-input-right">
        loading...
      </textarea
        >
        <span class="error-message"></span>
      </div>
    </div>
    <div id="results">
      <h2>Delta</h2>
      <label>
        <input
          id="show-delta-type-visual"
          type="radio"
          name="delta-type"
          checked
        />Visual
      </label>
      <label>
        <input id="show-delta-type-json" type="radio" name="delta-type" />JSON
      </label>
      <label>
        <input
          id="show-delta-type-annotated"
          type="radio"
          name="delta-type"
        />JSON (Annotated)
      </label>
      <div id="delta-panel-visual">
        <div class="header-options">
          <input id="showunchanged" type="checkbox" />
          <label for="showunchanged"> Show unchanged values </label>
        </div>
        <p id="visualdiff"></p>
      </div>
      <div id="delta-panel-annotated" style="display: none">
        <p id="annotateddiff"></p>
      </div>
      <div id="delta-panel-json" style="display: none">
        <p>
          (<span id="jsondifflength"></span>
          KB)
        </p>
        <textarea id="json-delta" readonly> </textarea>
        <span class="error-message"></span>
      </div>
    </div>
    <footer>
      <a href="https://github.com/benjamine/jsondiffpatch">Get JsonDiffPatch</a>
      <br />
      <p class="credits">
        JsonDiffPatch was developed by
        <a href="https://twitter.com/beneidel">Benjamin Eidelman</a>
      </p>
    </footer>
    <script src="build/demo.js" type="module"></script>

    <script>
      (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        (i[r] =
          i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          }),
          (i[r].l = 1 * new Date());
        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
      })(
        window,
        document,
        'script',
        '//www.google-analytics.com/analytics.js',
        'ga',
      );

      ga('create', 'UA-75839528-1', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>
